// place your custom styles here

@mixin hide-scrollbar() {
	// 隐藏滚动条
	/*overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }*/
}

.toggle-sidebar-wrapper {
	display: none;
}

.vp-toggle-navbar-button {
	display: none;
}

.vp-footer-wrapper {
	display: none;
}

.page-meta {
	display: none;
}
// 顶部导航
.head {
	background: var(--bg-color) !important;
	//safari 浏览器适配
	height: var(--navbar-height) !important;

	.dropdown-menu {
		background: var(--bg-color) !important;
	}
}

.sidebar-open {
	#sidebar {
		display: flex !important;
		z-index: 1000;
		max-width: 300px !important;
	}
	.vp-sidebar-mask {
		background: transparent !important;
	}
}

// 侧边栏
#sidebar.vp-sidebar {
	@include hide-scrollbar();
	background: var(--bg-color);
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 400px;
	span,
	a {
		white-space: nowrap;
		font-size: 14px;
		// color: rgba(0, 0, 0, 0.65);
		color: var(--text-color);
		letter-spacing: 0.58px;
		text-align: left;
		font-weight: 400;
		height: 40px;
		line-height: 40px;

		display: flex;
		align-items: center;
	}
	& > .vp-sidebar-links > li > .vp-sidebar-link {
		padding-left: 25px !important;
	}
	// & > .vp-sidebar-links > li > .vp-sidebar-link.active {
	// 	padding-left: 65px;
	// }

	.vp-sidebar-link {
		width: 100%;
		height: 40px;
		padding-inline-start: 38px;
		&.active {
			background: var(--vp-c-accent-soft) !important;
			color: var(--vp-c-accent) !important;
		}
	}

	.vp-sidebar-header {
		margin-left: 18px;
		&:has(.vp-icon) {
			margin-left: 0px;
		}
	}
	.vp-icon {
		position: relative;
		left: 20px;
	}

	.vp-sidebar-link li:has(.active.vp-sidebar-link) {
		background-color: var(--bg-color);
	}

	.active.vp-sidebar-link {
		width: 420px;
		color: var(--text-color);
		background: var(--bg-color);
	}

	ul.vp-sidebar-links li .vp-sidebar-link::before {
		display: inline-block;
		padding-right: 15px;
		color: rgba(0, 0, 0, 0.45);
	}

	.vp-sidebar-links {
		width: 97%;
		margin: 0;
		padding-left: 10px;
		padding-top: 0;

		li {
			margin-top: 0;
			&[data-eusoft-scrollable-element]:has(> a) {
				padding: 0.25rem 0.5rem;
			}
			& > a.vp-sidebar-link {
				padding-left: 50px;
				.vp-icon {
					left: -10px;
					width: 18px;
					height: 18px;
				}
			}
		}

		.vp-sidebar-group {
			.vp-sidebar-title {
				padding-left: 30px;
				max-width: 17rem;
				overflow: hidden;
			}
		}
	}
}
.vp-sidebar-header .vp-arrow {
	position: absolute;
}
.vp-sidebar-header {
	overflow: auto;
}
.vp-sidebar-title {
	overflow: auto;
}

[vp-content]:not(.custom) #markdown-content > h1:first-child {
	display: block;
}

#markdown-content {
	table {
		display: table;
		width: 100%;
		word-break: break-all;
	}
}

*:lang(en-US) {
	.level2 {
		padding-inline-start: 1rem !important;
	}
	.level3 {
		padding-inline-start: 2rem !important;
	}
	.level4 {
		padding-inline-start: 3rem !important;
	}
	.level5 {
		padding-inline-start: 4rem !important;
	}
	.level6 {
		padding-inline-start: 5rem !important;
	}
}

// 主内容
#main-content.vp-page {
	// 中心容器
	@media (min-width: 240px) and (max-width: 960px) {
		padding-inline-start: 100px;
		padding-block-end: 50px;
	}
	// 面包屑
	.vp-breadcrumb {
		& li + li::before {
			color: rgba(0, 0, 0, 0.45);
		}

		a {
			font-size: 14px;
			color: rgba(0, 0, 0, 0.45);
			text-align: left;
			line-height: 22px;
			font-weight: 400;
		}

		.is-active a {
			color: rgba(0, 0, 0, 0.65);
		}
	}

	.vp-page-title {
		h1 {
			font-size: 30px;
			color: #2b2f36;
			letter-spacing: 0;
			font-weight: 500;
		}
	}

	// 右边的页内导航
	.vp-toc-placeholder {
		#toc {
			min-width: 17rem;
			.vp-toc-header {
				display: none;
			}

			.vp-toc-wrapper {
				@include hide-scrollbar();

				a {
					font-size: 12px;
					color: rgba(0, 0, 0, 0.65);
					letter-spacing: 0.5px;
					text-align: left;
					font-weight: 400;
				}

				.active a {
					color: #035dff;
				}
				.level3 {
					padding-inline-start: 1rem;
				}
				.level4 {
					padding-inline-start: 2rem;
				}
				.level5 {
					padding-inline-start: 3rem;
				}
				.level6 {
					padding-inline-start: 4rem;
				}

				.vp-toc-marker {
					background: #035dff;
					width: 2px;
				}

				.vp-toc-list {
					&::before {
						background: #d8d8d8;
					}

					.vp-toc-item {
						padding-left: 32px;
					}
					.vp-toc-item > a {
						color: var(--text-color);
					}
				}
			}
		}
	}

	// 文章主体
	.theme-hope-content {
		& > h1:first-child {
			display: block;
		}

		h1 {
			font-size: 26px;
			color: #2b2f36;
			letter-spacing: 0.74px;
			font-weight: 500;
		}

		h2 {
			font-size: 20px;
			color: #2b2f36;
			letter-spacing: 0.57px;
			font-weight: 500;
		}

		p,
		li,
		td {
			font-size: 14px;
			color: #636a72;
			letter-spacing: 0.4px;
			line-height: 30px;
			font-weight: 400;
		}
	}

	.vp-page-nav {
		a {
			border: 0;
			display: flex;
			align-items: center;

			span,
			.hint,
			.link {
				font-size: 14px;
				color: #035dff;
				letter-spacing: 0.4px;
				font-weight: 500;
			}

			.arrow {
				height: 0;
				width: 0;
				background-color: rgba(0, 0, 0, 0);
			}
			.hint::after {
				content: ":";
				padding-right: 8px;
			}
		}

		.prev {
			justify-content: start;
		}
		.prev::before {
			content: "<";
			color: #636a72;
			padding-right: 8px;
		}

		.next {
			justify-content: end;
		}
		.next::after {
			content: ">";
			color: #636a72;
			padding-left: 8px;
		}
	}
}
a.vp-skip-link.sr-only {
	display: none;
}
